<template>
	<div class='transform-plan-child'>
		<TopNav
			:navName="course.bgMap.name"
			color="#00493E"
			msgColor="#01937C"
			showCollect
		/>
		<!-- 背景图 -->
		<div class="background">
			<div class="background-content">
				<div
					:style="{
						'color': course.bgMap.nameColor,
						'text-shadow': `2px 3px ${course.bgMap.nameShadowColor}`,
					}"
					class="name"
				>
					{{course.bgMap.name}}
				</div>
				<div class="tags">
					<Tag
						class="tag"
						v-for="tag in course.bgMap.tags"
						:key="tag.name"
						:bgColor="tag.bgColor"
						:color="tag.color"
					>
						{{tag.name}}
					</Tag>
				</div>
				<div
					:style="{
						'color': course.bgMap.descColor,
					}"
					class="desc"
					v-html="course.bgMap.desc"
				/>
				<div class="btns">
					<Button
						radius="40"
						width="180"
						height="48"
						@click="$pushTo('CourseDetail', {id})"
					>
						<Iconfont
							name="icon-a-Group11"
							size="20"
						/>
						去改造
					</Button>
					<Button
						style="margin-left: 15px;"
						radius="40"
						width="110"
						height="48"
						:color="course.bgMap.collectBtnColor"
						:bgColor="course.bgMap.collectBtnBgColor"
						:border="course.bgMap.collectBtnBorder"
					>
						<Iconfont
							name="icon-Group"
							size="20"
							:color="course.bgMap.collectBtnColor"
						/>
						收藏
					</Button>
				</div>
			</div>
			<img
				style="width: 100%;"
				:src="course.bgMap.img"
			>
		</div>
		<div class="container">
			<div class="title">改造要求</div>
			<!-- 阶段步骤 -->
			<div style="margin-bottom: 60px;">
				<StepsYounger
					:role="role"
					:course="course"
				/>
			</div>
			<!-- 改造作品 -->
			<div class="title">改造作品</div>
			<!-- 作品集合 -->
			<div style="margin-bottom: 60px;"><Works :course="course" /></div>
			<!-- 问题 -->
			<div class="title">常见问题</div>
			<div style="margin-bottom: 60px;"><QA :course="course" /></div>
		</div>
	</div>
</template>

<script>
import { getCourse } from '@/api/course'
import StepsYounger from './components/StepsYounger'
import Works from './components/Works'
import QA from './components/QA'

export default {
  components: {
    StepsYounger,
    Works,
    QA
  },
  props: {
    role: {
      type: String,
      default: 'parent'
    }
  },
  data() {
    return {
      id: '',
      course: null
    }
  },
  created() {
    this.id = this.$route.query.id
    this.course = getCourse(this.id)
    console.log(this.course)
  },
  methods: {

  }
}
</script>

<style lang='scss' scoped>
.transform-plan-child {
  padding-top: 78px;
  background-color: #eff3f3;

  .background {
    overflow: hidden;
    border-radius: 30px 30px 0 0;

    &-content {
      position: absolute;
      top: 80px;
      left: 110px;
      z-index: 10;
      white-space: pre-wrap;

      .name {
        font-size: 54px;
        color: #ffffff;
        text-shadow: 2px 3px  #f1b3ad;
      }

      .tags {
        display: flex;
        margin: 15px 0 30px;

        .tag {
          &:not(:last-of-type) {
            margin-right: 8px;
          }
        }
      }

      .desc {
        margin-bottom: 20px;
        font-size: $sSmall;
        line-height: 26px;
        color: #ffffff;
      }
    }
  }

  .container {
    padding: 54px 0 54px 100px;
    margin-top: -30px;
    background-color: #ffffff;
    border-radius: 30px 30px 0 0;

    .title {
      margin-bottom: 30px;
      font-size: $sLarge;
      color: $color1;
    }
  }
}
</style>
